<template>
  <div class="body_all">
    <el-form ref="form" class="form" :model="form" label-width="100px">
      <el-form-item v-show="pidStart" label="上级栏目：">
        <span>{{ form.pidName }}</span>
      </el-form-item>
      <el-form-item label="新窗口打开：" class="form1">
        <el-tooltip
          :content="form.newWindowOpen === 'self' ? '关闭' : '打开'"
          placement="top"
        >
          <el-switch
            v-model="form.newWindowOpen"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="self"
            inactive-value="blank"
          >
          </el-switch>
        </el-tooltip>
        <span class="header_like">排序：</span>
        <el-input
          class="header_sort"
          size="mini"
          type="number"
          v-model="form.sort"
        ></el-input>
      </el-form-item>
      <el-form-item label="栏目名称：">
        <el-input v-model="form.columnName"></el-input>
      </el-form-item>
      <el-form-item label="栏目类型：">
        <el-select
          v-model="form.columnType"
          @change="modelType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in columnTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span class="header_like">栏目位置：</span>
        <el-select v-model="form.columnOption" placeholder="请选择">
          <el-option
            v-for="item in columnPosition"
            :key="item.id"
            :label="item.name"
            :value="item.model"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="form.columnType === 5" label="栏目链接：">
        <el-input v-model="form.columnLink"></el-input>
      </el-form-item>
      <el-form-item v-show="form.columnType !== 5" label="栏目图片：">
        <div v-show="form.columnImage !== ''" class="imageUl">
          <div style="position: relative">
            <img :src="form.columnUrlImage" class="avatar" />
            <i class="el-icon-error el-img-error" @click="delImage()"></i>
          </div>
        </div>
        <el-upload
          style="overflow: hidden"
          class="avatar-uploader"
          action
          :http-request="ImgSuccess"
          :show-file-list="false"
          accept="image/*"
        >
          <i
            v-show="form.columnImage === ''"
            class="el-icon-plus avatar-uploader-icon"
          ></i>
        </el-upload>
        <div v-show="form.columnImage === ''" class="tips_text">
          支持jpg、gif、png格式上传，大小建议800x800像素以上，大小不超过1M的正方形图片
        </div>
      </el-form-item>
      <el-form-item v-show="form.columnType !== 5" label="SEO关键字：">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入内容"
          v-model="form.seoKeyword"
        >
        </el-input>
      </el-form-item>
      <el-form-item v-show="form.columnType !== 5" label="SEO描述：">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入内容"
          v-model="form.seoDescribe"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div v-show="form.columnType !== 5" class="foot_editor">
      <wangeditor
        class="editor"
        ref="editor"
        name="editor"
        :textData="editor_data"
      ></wangeditor>
    </div>
    <div class="foot_btn">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="closebtn">取消</el-button>
    </div>
  </div>
</template>

<script>
import wangeditor from "../../components/wangeditor"; //　wangeditor富文本插件　－使用中
import { UrlPath } from "../../utils/util";
export default {
  components: {
    wangeditor,
  },
  data() {
    return {
      pidStart: false,
      form: {
        id: "",
        pid: "", //上级栏目
        pidName: "",
        newWindowOpen: "self", // 新窗口打开
        columnShow: "1",
        sort: 1, // 排序
        columnLink: "", //栏目链接
        columnName: "", // 栏目名称
        columnType: "", // 栏目类型
        columnOption: "", // 栏目位置
        columnImage: "", // 栏目图片
        columnUrlImage: "", // 图片外显地址
        seoKeyword: "", // seo关键字
        seoDescribe: "", // seo描述
      },
      editor_data: "", // 富文本
      // 栏目类型
      columnTypeList: [],
      // 栏目位置
      columnPosition: [
        {
          id: "1",
          name: "头部",
          model: "head",
        },
        {
          id: "2",
          name: "底部",
          model: "foot",
        },
        {
          id: "3",
          name: "其他",
          model: "other",
        },
      ],
    };
  },
  beforeRouteEnter: (to, from, next) => {
    if (to.query.id === undefined) {
      if (to.query.pid === undefined) {
        to.meta.title = "添加栏目";
      } else {
        to.meta.title = "添加子栏目";
      }
    } else {
      to.meta.title = "编辑栏目";
    }
    next();
  },
  created() {
    this.getMode();
    if (this.$route.query.id !== undefined) {
      this.form.id = this.$route.query.id;
      this.form.pid = this.$route.query.pid;
      this.form.pidName = this.$route.query.name;
      this.form.newWindowOpen = this.$route.query.target;
      this.columnShow = this.$route.query.show;
      this.form.columnLink = this.$route.query.url;
      this.form.columnName = this.$route.query.name;
      this.form.columnType = this.$route.query.model
        ? parseInt(this.$route.query.model)
        : "";
      this.form.columnLink = this.$route.query.url;
      this.form.columnOption = this.$route.query.position;
      this.form.columnImage = this.$route.query.thumb?this.$route.query.thumb:"";
      this.form.columnUrlImage = this.$route.query.thumb?this.$route.query.thumb:"";
      this.form.seoKeyword = this.$route.query.keywords;
      this.form.seoDescribe = this.$route.query.desp;
      this.form.sort = this.$route.query.sort;
      this.editor_data = this.$route.query.content;
    } else if (this.$route.query.pid !== undefined) {
      this.pidStart = true;
      this.form.pid = this.$route.query.pid;
      this.form.pidName = this.$route.query.pidName;
    }
  },
  methods: {
    // 获取模型数据
    getMode() {
      this.$cmsapi
        .CategoryModel()
        .then((res) => {
          this.columnTypeList = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 模型切换
    modelType(val) {
      if (val === 5) {
        // 外链情况重置本站录入数据
        this.form.columnImage = this.$options.data().form.columnImage;
        this.form.columnUrlImage = this.$options.data().form.columnUrlImage;
        this.form.seoKeyword = this.$options.data().form.seoKeyword;
        this.form.seoDescribe = this.$options.data().form.seoDescribe;
        this.editor_data = this.$options.data().editor_data;
        this.$refs.editor.clearhtml();
      } else {
        // 本站的时候清除掉外链的录入数据
        this.form.columnLink = this.$options.data().form.columnLink;
      }
    },
    // 返回事件
    closebtn() {
      this.$router.go(-1);
    },
    // 表单提交
    onSubmit() {
      this.editor_data = this.$refs.editor.submit();
      let param = {};
      if (this.form.columnType === 5) {
        // 外链情况
        param = {
          id: this.form.id,
          pid: this.form.pid,
          name: this.form.columnName,
          model: this.form.columnType,
          target: this.form.newWindowOpen,
          position: this.form.columnOption,
          show: this.form.columnShow,
          sort: this.form.sort,
          url: this.form.columnLink,
        };
      } else {
        param = {
          id: this.form.id,
          pid: this.form.pid,
          name: this.form.columnName,
          thumb: this.form.columnImage.replace(`${UrlPath}`, ""),
          keywords: this.form.seoKeyword,
          desp: this.form.seoDescribe,
          model: this.form.columnType,
          target: this.form.newWindowOpen,
          position: this.form.columnOption,
          show: this.form.columnShow,
          sort: this.form.sort,
          content: this.editor_data,
          url: this.form.columnLink,
        };
      }
      this.$cmsapi
        .CategorySave(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "提交成功！",
          });
          this.$router.go(-1);
        })
        .catch((erro) => {
          console.log(erro);
        });
    },
    // 图片上传
    ImgSuccess(param) {
      this.$cmsapi.FileUpload(param.file).then((res) => {
        this.form.columnImage = res.data.path;
        this.form.columnUrlImage = res.data.url;
      }).catch((erro) => {
        console.log(erro);
      });
    },
    delImage() {
      this.form.columnImage = "";
      this.form.columnUrlImage = "";
    },
  },
};
</script>
<style scoped>
/* 表单 */
.form {
  width: 50%;
}
.form1 {
  display: block;
}
.header_like {
  margin-left: 10%;
}
.header_sort {
  width: 19.2%;
}
.foot_editor {
  width: 60%;
  margin-bottom: 30px;
  margin-left: 20px;
  display: inline-block;
}
</style>>